<template>
	<div>
		<div class="box">
			<!-- v-if="tmlSupplementList.length > 0" -->
			<div v-for="item in tmlSupplementList" class="card">
				<div class="item">
					<div class="label">产品</div>
					<div class="content">
						{{ item.schemeName || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">车型</div>
					<div class="content">
						{{ item.carModelName || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">利率（%）</div>
					<div class="content">{{ item.interestRate || '-' }} %</div>
				</div>
				<div class="item">
					<div class="label">车价</div>
					<div class="content">
						{{ format_thousand(item.purchasePrice) || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">购置税</div>
					<div class="content">
						{{ format_thousand(item.carPurchaseTax) || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">总额</div>
					<div class="content">
						{{ format_thousand(item.carTotlePrice) || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">首付比例（%）</div>
					<div class="content">
						{{ item.downpaymentProportion || '-' }} %
					</div>
				</div>
				<div class="item">
					<div class="label">首付</div>
					<div class="content">
						{{ format_thousand(item.downpayment) || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">融资额</div>
					<div class="content">
						{{ format_thousand(item.financedAmount) || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">期限（月）</div>
					<div class="content">
						{{ item.planTenancy || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">尾款比例（%）</div>
					<div class="content">
						{{ item.balancepaymentProportion || '-' }} %
					</div>
				</div>
				<div class="item">
					<div class="label">尾款</div>
					<div class="content">
						{{ format_thousand(item.balancepayment) || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">月租金</div>
					<div class="content">
						{{ format_thousand(item.rent) || '-' }}
					</div>
				</div>
				<div class="item">
					<div class="label">利息</div>
					<div class="content">
						{{ format_thousand(item.interest) || '-' }}
					</div>
				</div>
			</div>
			<!-- <div v-else></div> -->
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import * as apis from '@/api/quota/apply/api.js';
	import * as utils from '@/pages/quota/libs/utils.js';
	import FromItem from '../formItem/index.vue';
	export default {
		name: '',
		components: { FromItem },
		dicts: [],
		props: {},
		inject: [
			'details_provide',
			'config_provide',
			'deptList_provide',
			'state_provide',
			'index_provide',
			'planDicts_provide',
			'fromtype_provide',
		],
		data() {
			return {};
		},
		computed: {
			details() {
				return this.details_provide();
			},
			config() {
				return this.config_provide();
			},
			deptList() {
				return this.deptList_provide();
			},
			planDicts() {
				return this.planDicts_provide();
			},
			state() {
				return this.state_provide();
			},
			fromtype() {
				return this.fromtype_provide();
			},

			index() {
				return this.index_provide();
			},
			currentInfoData() {
				return this.details.productList?.[this.index] ?? {};
			},
			firstInfoData() {
				return this.details.productList?.[0] ?? {};
			},
			tmlSupplementList() {
				return this.details?.tmlSupplementList ?? [{}];
			},
		},
		watch: {},
		filters: {},
		created() {},
		mounted() {},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.box {
		// padding: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		.title {
			border-bottom: 1px solid #e9e9e9;
			font-weight: 500;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
	}
	.card {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		border: 1px solid #ebeef5;
		padding: 15rpx 20rpx;
	}
	.item {
		display: flex;
		.label {
			width: 100px;
		}
		.content {
			flex: 1;
			text-align: right;
		}
	}
</style>
